<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/common.css">
</head>

<body>
    <div class="main">
        <!-- 菜单栏 -->
        <nav class="nav">
            <a href="">正在热映</a>
            <a href="" class="select">即将上映</a>
            <a href="">经典影片</a>
        </nav>
        <!-- 主页面 -->
        <div class="container">
            <!-- 选择栏 -->
            <div class="choose">
                <div class="choose-item clearfix">
                    <div class="left">类型：</div>
                    <div class="right">
                        <ul class="clearfix">
                            <li class="item"><a href="">Lorem.</a></li>
                            <li class="item"><a href="">Facilis.</a></li>
                            <li class="item"><a href="">Neque?</a></li>
                            <li class="item"><a href="">Aperiam.</a></li>
                            <li class="item"><a href="">Commodi!</a></li>
                            <li class="item"><a href="">Nihil?</a></li>
                            <li class="item"><a href="">Culpa.</a></li>
                            <li class="item"><a href="">Lorem.</a></li>
                            <li class="item"><a href="">Facilis.</a></li>
                            <li class="item"><a href="">Neque?</a></li>
                            <li class="item select"><a href="">Aperiam.</a></li>
                            <li class="item"><a href="">Commodi!</a></li>
                            <li class="item"><a href="">Nihil?</a></li>
                            <li class="item"><a href="">Culpa.</a></li>
                            <li class="item"><a href="">Praesentium!</a></li>
                            <li class="item"><a href="">Eos.</a></li>
                            <li class="item"><a href="">Veniam.</a></li>
                        </ul>
                    </div>
                </div>
                <div class="choose-item clearfix">
                    <div class="left">地区：</div>
                    <div class="right">
                        <ul class="clearfix">
                            <li class="item select"><a href="">Lorem.</a></li>
                            <li class="item"><a href="">Facilis.</a></li>
                            <li class="item"><a href="">Neque?</a></li>
                            <li class="item"><a href="">Aperiam.</a></li>
                            <li class="item"><a href="">Commodi!</a></li>
                            <li class="item"><a href="">Nihil?</a></li>
                            <li class="item"><a href="">Culpa.</a></li>
                            <li class="item"><a href="">Lorem.</a></li>
                            <li class="item"><a href="">Facilis.</a></li>
                            <li class="item"><a href="">Neque?</a></li>
                            <li class="item"><a href="">Aperiam.</a></li>
                            <li class="item"><a href="">Commodi!</a></li>
                            <li class="item"><a href="">Nihil?</a></li>
                            <li class="item"><a href="">Culpa.</a></li>
                            <li class="item"><a href="">Praesentium!</a></li>
                            <li class="item"><a href="">Eos.</a></li>
                            <li class="item"><a href="">Veniam.</a></li>
                        </ul>
                    </div>
                </div>
                <div class="choose-item clearfix noline">
                    <div class="left">时间：</div>
                    <div class="right">
                        <ul class="clearfix">
                            <li class="item"><a href="">Lorem.</a></li>
                            <li class="item"><a href="">Facilis.</a></li>
                            <li class="item"><a href="">Lorem.</a></li>
                            <li class="item select"><a href="">Facilis.</a></li>
                            <li class="item"><a href="">Neque?</a></li>
                            <li class="item"><a href="">Aperiam.</a></li>
                            <li class="item"><a href="">Commodi!</a></li>
                            <li class="item"><a href="">Nihil?</a></li>
                            <li class="item"><a href="">Culpa.</a></li>
                            <li class="item"><a href="">Neque?</a></li>
                            <li class="item"><a href="">Aperiam.</a></li>
                            <li class="item"><a href="">Commodi!</a></li>
                            <li class="item"><a href="">Nihil?</a></li>
                            <li class="item"><a href="">Culpa.</a></li>
                            <li class="item"><a href="">Praesentium!</a></li>
                            <li class="item"><a href="">Eos.</a></li>
                            <li class="item"><a href="">Veniam.</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 显示栏 -->
            <div class="movie clearfix">
                <div class="movie-item">
                    <div class="movie-img">
                        <a href=""><img src="./../../log-news.png" alt=""></a>
                    </div>
                    <div class="movie-name"> <a href=""> 我的神 我的神！</a>
                    </div>
                    <div class="movie-sorce">9.5</div>
                </div>
                <div class="movie-item">
                    <div class="movie-img">
                        <a href=""><img src="./../../log-news.png" alt=""></a>
                    </div>
                    <div class="movie-name">无敌仇神 我的神 我的神！！！</div>
                    <div class="movie-sorce">9.5</div>
                </div>
                <div class="movie-item">
                    <div class="movie-img">
                        <a href=""><img src="./../../log-news.png" alt=""></a>
                    </div>
                    <div class="movie-name">无敌仇神 我的神 我的神！！！</div>
                    <div class="movie-sorce">9.5</div>
                </div>
                <div class="movie-item">
                    <div class="movie-img">
                        <a href=""><img src="./../../log-news.png" alt=""></a>
                    </div>
                    <div class="movie-name">无敌仇神 我的神 我的神！！！</div>
                    <div class="movie-sorce">9.5</div>
                </div>
                <div class="movie-item">
                    <div class="movie-img">
                        <a href=""><img src="./../../log-news.png" alt=""></a>
                    </div>
                    <div class="movie-name">无敌仇神 我的神 我的神！！！</div>
                    <div class="movie-sorce">9.5</div>
                </div>
                <div class="movie-item">
                    <div class="movie-img">
                        <a href=""><img src="./../../log-news.png" alt=""></a>
                    </div>
                    <div class="movie-name">无敌仇神 我的神 我的神！！！</div>
                    <div class="movie-sorce">9.5</div>
                </div>
                <div class="movie-item">
                    <div class="movie-img">
                        <a href=""><img src="./../../log-news.png" alt=""></a>
                    </div>
                    <div class="movie-name">无敌仇神 我的神 我的神！！！</div>
                    <div class="movie-sorce">9.5</div>
                </div>
                <div class="movie-item">
                    <div class="movie-img">
                        <a href=""><img src="./../../log-news.png" alt=""></a>
                    </div>
                    <div class="movie-name">无敌仇神 我的神 我的神！！！</div>
                    <div class="movie-sorce">9.5</div>
                </div>
                <div class="movie-item">
                    <div class="movie-img">
                        <a href=""><img src="./../../log-news.png" alt=""></a>
                    </div>
                    <div class="movie-name">无敌仇神 我的神 我的神！！！</div>
                    <div class="movie-sorce">9.5</div>
                </div>
                <div class="movie-item">
                    <div class="movie-img">
                        <a href=""><img src="./../../log-news.png" alt=""></a>
                    </div>
                    <div class="movie-name">无敌仇神 我的神 我的神！！！</div>
                    <div class="movie-sorce">9.5</div>
                </div>
                <div class="movie-item">
                    <div class="movie-img">
                        <a href=""><img src="./../../log-news.png" alt=""></a>
                    </div>
                    <div class="movie-name">无敌仇神 我的神 我的神！！！</div>
                    <div class="movie-sorce">9.5</div>
                </div>
                <div class="movie-item">
                    <div class="movie-img">
                        <a href=""><img src="./../../log-news.png" alt=""></a>
                    </div>
                    <div class="movie-name">无敌仇神 我的神 我的神！！！</div>
                    <div class="movie-sorce">9.5</div>
                </div>
                <div class="movie-item">
                    <div class="movie-img">
                        <a href=""><img src="./../../log-news.png" alt=""></a>
                    </div>
                    <div class="movie-name">无敌仇神 我的神 我的神！！！</div>
                    <div class="movie-sorce">9.5</div>
                </div>
                <div class="movie-item">
                    <div class="movie-img">
                        <a href=""><img src="./../../log-news.png" alt=""></a>
                    </div>
                    <div class="movie-name">无敌仇神 我的神 我的神！！！</div>
                    <div class="movie-sorce">9.5</div>
                </div>
                <div class="movie-item">
                    <div class="movie-img">
                        <a href=""><img src="./../../log-news.png" alt=""></a>
                    </div>
                    <div class="movie-name">无敌仇神 我的神 我的神！！！</div>
                    <div class="movie-sorce">9.5</div>
                </div>
                <div class="movie-item">
                    <div class="movie-img">
                        <a href=""><img src="./../../log-news.png" alt=""></a>
                    </div>
                    <div class="movie-name">无敌仇神 我的神 我的神！！！</div>
                    <div class="movie-sorce">9.5</div>
                </div>
                <div class="movie-item">
                    <div class="movie-img">
                        <a href=""><img src="./../../log-news.png" alt=""></a>
                    </div>
                    <div class="movie-name">无敌仇神 我的神 我的神！！！</div>
                    <div class="movie-sorce">9.5</div>
                </div>
                <div class="movie-item">
                    <div class="movie-img">
                        <a href=""><img src="./../../log-news.png" alt=""></a>
                    </div>
                    <div class="movie-name">无敌仇神 我的神 我的神！！！</div>
                    <div class="movie-sorce">9.5</div>
                </div>
                <div class="movie-item">
                    <div class="movie-img">
                        <a href=""><img src="./../../log-news.png" alt=""></a>
                    </div>
                    <div class="movie-name">无敌仇神 我的神 我的神！！！</div>
                    <div class="movie-sorce">9.5</div>
                </div>
            </div>
            <!-- 分页 -->
            <div class="pager">
                <a href="" class="pager-item">上一页</a>
                <a href="" class="pager-item">1</a>
                <a href="" class="pager-item select ">2</a>
                <a href="" class="pager-item">3</a>
                <a href="" class="pager-item">4</a>
                <a href="" class="pager-item">5</a>
                <a href="" class="pager-item">6</a>
                <a href="" class="pager-item">7</a>
                <a href="" class="pager-item">8</a>
                <a href="" class="pager-item">9</a>
                <a href="" class="pager-item">10</a>
                <a href="" class="pager-item">下一页</a>
            </div>

        </div>




    </div>
</body>

</html>